<template>
	<view>
		<!-- 头像信息 -->
		<uni-card>
			<view class="">
				<view class="main">
					<image :src="detailInfo.user.avatar" mode="" ></image>
					<view class="main-div">
						<view class="main-name">
							{{detailInfo.user.userName}}
						</view>
						<view class="main-time">
							{{detailInfo.createTime}}
							<text>提交申请</text> 
						</view>
					</view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="BottonList">
				<view class="ListItem">
					<text>配件名称：</text>
					<text>{{detailInfo.partName}}</text>
				</view>
				<view class="ListItem">
					<text>总数量：</text>
					<text>{{detailInfo.partTotal}}</text>
				</view>
				<view class="ListItem">
					<text>规格：</text>
					<text>{{detailInfo.inventorySize.sizeTitle}}</text>
				</view>
				<view class="ListItem">
					<text>规格值：</text>
					<text>{{detailInfo.inventorySizePrice.priceInfo}}</text>
				</view>
				<view class="ListItem">
					<text>领用人：</text>
					<text>{{detailInfo.receivePeople}}</text>
				</view>
				<view class="ListItem">
					<text>领用时间：</text>
					<text>{{detailInfo.receiveDate}}</text>
				</view>
				<view class="ListItem">
					<text>领用数量：</text>
					<text>{{detailInfo.receiveNum}}</text>
				</view>
				<view class="ListItem">
					<text>项目名称：</text>
					<text>{{detailInfo.projectName}}</text>
				</view>
				<view class="ListItem">
					<text>备注：</text>
					<text>{{detailInfo.remark}}</text>
				</view>
				<view class="ListItem" v-if="detailInfo.auditStatus == 2">
					<text>驳回原因：</text>
					<text>{{detailInfo.rejectCause}}</text>
				</view>
				<view class="">
					
						<image src="../../../../static/img/examineState/examine.png" mode="" class="status" v-if="detailInfo.auditStatus == 0"></image>
						
						<image src="../../../../static/img/examineState/success.png" mode="" class="status" v-if="detailInfo.auditStatus == 1"></image>
						<image src="../../../../static/img/examineState/reject.png" mode="" class="status"  v-if="detailInfo.auditStatus == 2"></image>
				</view>
				
			</view>
			
			
			
		</uni-card>
	
		<view class="buttonState" v-if="detailInfo.auditStatus == 0">
			<button type="default" @click="reason = true">驳回</button>
			<button type="default" class="button-success" @click="rejectds(1)">通过</button>
		</view>
		
		<view class="mask" v-if="reason" @click="reason = false">
			<view class="Content">
				<textarea v-model="DeterminationValue" placeholder="驳回原因" class="textarea"  @click.stop=""/>
				
				<view class="Determination" @click.stop="rejectds(2)">确定驳回</view>
				<view class="cancel" @click.stop="reason = false">取消</view>
			</view>
		</view>
		
		
		
	</view> 
</template>

<script>
	import fault from "@/serve/api/fault.js"
	export default {
		data() {
			return {
				partId:"",
				detailInfo:{
					user:{},
					inventorySize:{},
					inventorySizePrice:{},
				},
				reason:false,
				DeterminationValue:"",
			}
		},
		onLoad(e) {
			this.types = e.types
			this.partId = e.partId
			this.getDeatil()
		},
		methods: {
			async getDeatil(){
				const res = await fault.selectPartApplicationInfo({partId:this.partId});
				this.detailInfo = res.data.data;
			},
			async rejectds(e){
				if(e == 2 && !this.DeterminationValue){
					this.tip("请输入驳回原因")
					return
				}
				let parme = {
					partId:this.partId,
					auditStatus:e,
					rejectCause:this.DeterminationValue
				}
				const res = await fault.approvalPartApplication(parme)
				if(res){
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2];
					//#ifdef APP-PLUS
						prevPage.$vm.getList(this.types,true)
						prevPage.$vm.getHeadNav()
					// #endif
					//#ifdef H5
						prevPage.getList(this.types,true)
						prevPage.getHeadNav()
					// #endif
					uni.navigateBack({})
				}
				console.log(res)
				
				
			},
		}
	}
</script>

<style scoped>
	*{
		margin:0;
		padding: 0;
	}
	page{
		width: 750rpx;
		background: #EFF2F5;
		overflow: hidden;
	}
	view{
		font-size:28rpx;
		line-height:1.8;
		
	}
	.uni-card{
		border: none;
		border-radius: 16rpx;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
		
			width: calc(100vw - 80rpx);
			margin: 20rpx auto 0;
	}
	
	/* 内容区域 */
	.main{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1rpx solid #E2E6EF;
		padding-bottom: 15rpx;
	}
	.main-div{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.main-name{

		/* font-size: 30rpx; */
		
		 font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #34363D;

	}
	.main image{
		width: 80rpx;
		height: 80rpx;
		background: #E2E6EF;
		border: 4rpx solid #F0F3F6;
		border-radius: 50%;
		margin-right: 18rpx;
	
	}
	.main-time{
		font-size: 24rpx;
		color: #989BA6;
	}
	.main-time text{
		margin-left: 20rpx;
	}
	
	.BottonList{
		margin-top: 10rpx;
		position: relative;
	}
	.BottonList .ListItem{
		margin-top: 50rpx;
		font-size: 30rpx;
	}
	.BottonList .ListItem text:nth-child(1){
		width: 170rpx;
		color: #989BA6;
		display: inline-block;
	}
	.BottonList .ListItem text:nth-child(1){
		width: 150rpx;
		display: inline-block;
	}
	
	.status{
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: -80rpx;
		right: 20rpx;
		background-color: #FFFFFF;
	}
	
	.buttonState{
		width: calc(100vw - 80rpx);
			margin: 120rpx auto 0;
			padding-bottom: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	button{
		width: 314rpx;
		height: 100rpx;
		background: #FF5753;
		box-shadow: 0px 10rpx 30rpx 0px rgba(255, 87, 83, 0.3);
		border-radius: 50rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	
	}
	.button-success{
		width: 314rpx;
		height: 100rpx;
		background: #3AC211;
		box-shadow: 0px 10rpx 30rpx 0px rgba(58, 194, 17, 0.3);
		border-radius: 50rpx;
	}
	.textarea{
		padding: 20rpx;
		background-color: rgb(240,243,245);
		border-radius: 10rpx;
		width: calc(100% - 20rpx);
	}
	.Determination{
		background: #FF5753;
		width: 100%;
		border-radius: 10rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 20rpx;
		text-align: center;
		color: #FFFFFF;
	}
	.cancel{
		margin-top: 20rpx;
		text-align: center;
		color: #989BA6;
		width: 100%;
	}
	.mask{
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		top: 0;
		left: 0;
		z-index: 9999999;
		position: fixed;
	}
	.mask .Content{
		width: 80%;
		padding: 30rpx 40rpx;
		background-color: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		border-radius: 10rpx;
	}
</style>
